<section>

	<div class="help-content">
		<h3 class="info-title smaller" data-id="#pages/login">Login</h3>
		<!-- #section:pages/login -->
		<div class="info-section">
		 <ul class="info-list list-unstyled">
			<li>			
			Login page has a more compact structure and generally needs fewer scripts and stylesheets unless
			you want to include some extra plugins for some form fields.
			<br />
			For more info about this please see <a href="#basics/layout.login" class="help-more">Login Layout</a>
			</li>
			<li>
			Basically it consists of three optional widget boxes for login, signup and password sections.
			</li>
			<li>
				You should add <code>.login-layout</code> class to <body>body</code> element:
<pre data-language="html">
&lt;body class="login-layout"&gt;
or
&lt;body class="login-layout blur-login"&gt;
or
&lt;body class="login-layout light-login"&gt;
</pre>
			</li>
			
			<li>
				There are three optional background styles:
				<ol>
				  <li><code>.login-layout</code> default login background</li>
				  <li><code>.login-layout.blur-login</code> blurred image background</li>
				  <li><code>.login-layout.light-login</code> light login background</li>
				</ol>
			</li>
			
			<li>
				The (optionally) three boxes are inside <code>.login-container</code>:
<pre data-language="html">
<div class="login-container">
  <div class="center">
    <!-- page header and text -->
  </div>
  <div class="space-6"></div><!-- optional space -->
  <div class="pos-rel"><!-- a position relative container -->
     <div class="login-box visible widget-box no-border" id="login-box">
        <!-- login area -->
     </div>

     <div class="forgot-box widget-box no-border" id="forgot-box">
        <!-- forgot area -->
     </div>

     <div class="signup-box widget-box no-border" id="signup-box">
        <!-- signup area -->
     </div>
  </div>
</div>
</pre>
			</li>
			
			<li>
				Inside login box, there are the optional social login buttons inside
				<code>.social-or-login</code> and <code>.social-login</code>  container:
<pre data-language="html">
<div class="social-or-login center">
   <span class="bigger-110">Or Login Using</span>
</div>
<div class="space-6"></div>
<div class="social-login center">
   <a class="btn btn-primary"><i class="ace-icon fa fa-facebook"></i></a>
   <a class="btn btn-info"><i class="ace-icon fa fa-twitter"></i></a>
   <a class="btn btn-danger"><i class="ace-icon fa fa-google-plus"></i></a>
</div>
</pre>
			</li>
			
			<li>
				The bottom links that are used to move between boxes
				and are inside <code>.toolbar</code> which have a class only used to color them:
<pre data-language="html">
<div class="toolbar center">
   <a class="back-to-login-link" data-target='#login-box' href="#">
     <i class="ace-icon fa fa-arrow-left"></i>
     Back to login
   </a>
</div>
or
<div class="toolbar clearfix">
  <div>
    <a class="forgot-password-link" data-target="#forgot-box" href="#">
        <i class="ace-icon fa fa-arrow-left"></i>
        I forgot my password
    </a>
  </div>
  <div>
    <a class="user-signup-link" data-target="#signup-box" href="#">
        I want to register
        <i class="ace-icon fa fa-arrow-right"></i>
    </a>
  </div>
</div>
</pre>
			Each link has a <code>data-target</code> attribute.
			<br />
			

			</li>
			
			<li>
				<code>data-target</code> is the selector of target.
				The following code should also be included in your page for switching between pages:
<pre data-language="javascript">
jQuery(function($) {
 $(document).on('click', '.toolbar a[data-target]', function(e) {
    e.preventDefault();
    var target = $(this).data('target');
    $('.widget-box.visible').removeClass('visible');//hide others
    $(target).addClass('visible');//show target
 })
})
</pre>
			</li>
			
		 </ul>
		</div>
		<!-- /section:pages/login -->
	</div>
	
</section>